<template>
  <!--  修改-->
  <div>
    <el-container>
      <el-aside class="leftNav">
        <!--左导航栏-->
        <navLeft :user="user" :token="token"/>
      </el-aside>

      <el-container>
        <el-header
          style="z-index: 1; padding-left:1%;padding-bottom: 4%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
          <!--头导航栏-->
          <navHead :user="user" :token="token"/>
        </el-header>

        <el-main style="height: 800px">
          <router-view/>
        </el-main>
      </el-container>

    </el-container>

  </div>
</template>

<script>
import NavHead from "../components/NavHead";
import NavLeft from "../components/NavLeft";
import Global from "../js/global";
import eventBus from "../js/eventBus";

export default {
  name: "Index",
  components: {
    'navHead': NavHead,
    'navLeft': NavLeft,
  },
  data() {
    return {
      user: {
        userId: '',
        loginName: '',
        userName: '',
        userType: '',
        email: '',
        phoneNumber: '',
        token: '',
      },
      token: '',
    }
  },
  methods: {
    getUser(token, vm) {
      const that = vm;
      this.axios({
        url: Global.SERVER_ADDRESS + '/user/getUser',
        params: {
          token: token
        },
        method: 'GET',
      }).then(function (rs) {
        const user = JSON.parse(rs.data.msg)
        if (rs.data.code === '200') {
          that.user.userId = user.id;
          that.user.userName = user.userName;
          that.user.loginName = user.loginName;
          that.user.userType = user.userType;
          that.user.token = that.token;
          that.user.email = user.email;
          that.user.phoneNumber = user.phoneNumber;
          if (user.avatar !== "") {
            eventBus.$emit("loadAvatar", "do");
          }
        } else if (rs.data.code === '401') {
          that.$message.error("验证失败，请重新登录!");
          that.$router.push({path: '/login'});
        } else {
          console.log(rs.data.msg);
        }
      }).catch(function (error) {
        console.log(error)
      })
    }
  },
  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      var token = vm.$cookies.get("TOKEN");
      if (token === null) {
        vm.$router.push({path: '/login'});
        return;
      }
      vm.token = token;
      vm.getUser(token, vm);
      vm.$router.push({path: '/index/AllFiles'});
    });
  },
}
</script>

<style scoped>
.leftNav {
  width: 200px !important;
}

@media only screen and (max-width: 900px) {
  .leftNav {
    width: 12% !important;
  }
}

.el-footer {
  position: fixed;
  width: 100%;
  bottom: 0px;
}

.el-header, .el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {

  background-color: #D3DCE6;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  /*line-height: 160px;*/
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

</style>
